<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<!-- 引入jq， 引入后就可以使用jQuery提供的方法 -->
		<script src="js/jquery-1.12.3.js"></script>
		
		<script>
			
			
			//JS: 事件会覆盖
			window.onload = function(){
				console.log("onload1");
			}
			window.onload = function(){
				console.log("onload2");
			}
			
			//JQ: 事件不会覆盖
			//JQ中的方法一般不会覆盖
			$(window).load(function(){
				console.log("load1");
			});
			$(window).load(function(){
				console.log("load2");
			});
			
			//ready: 在页面加载完成后执行
			//load: 在页面(包括图片，资源)加载完成后执行
			$(document).ready(function(){
				console.log("ready1");
			})
			$(document).ready(function(){
				console.log("ready2");
			})
			
			
			//ready的简写方式：
			$(function(){
				console.log("ready3");
				
				//JS
				//var box = document.getElementById("box");
				//box.innerHTML = "LOL";
				
				//JQ
				//$("#box").html("Dota2");
				
				//html() : innerHTML
				
				//点击三个li
				//JS
//				var ali = document.getElementsByTagName("li");
//				for (var i=0; i<ali.length; i++) {
//					ali[i].onclick = function(){
//						console.log(this.innerHTML);
//					}
//				}
				
				//JQ
				$("li").click(function(){
					//console.log(this.innerHTML);
					console.log( $(this).html() );
				})
				
			})
			
		</script>
		
	</head>
	<body>
		<div id="box">div</div>
		<ul>
			<li>10</li>
			<li>20</li>
			<li>30</li>
		</ul>
	</body>
</html>
